<!--
/**
* Author: linchun
* Date: 2022-08-05 17:32
* Desc: ViewerInfo 观影人信息
*/
-->
<template>
  <view class="flex-col">
    <!-- 抬头 -->
    <view class="viewer-info" :class="extClass">
      <view class="header flex-b-m">
        <text class="fb"> 观影人信息 </text>
        <text class="fc-primary" @click.stop="handleViewerInfo"> 选择 </text>
      </view>
      <view class="content" v-if="viewers.length > 0">
        <!-- 渲染内容 -->
        <view
          class="item flex-b-m"
          v-for="item in viewers"
          :key="item.realNameId"
        >
          <view>
            {{ item.realName }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'ViewerInfo',
    data() {
      return {}
    },
    components: {},
    props: {
      list: {
        type: [Array, Object],
        default() {
          return []
        }
      },
      ticketNum: [String, Number]
    },
    created() {},
    computed: {
      viewers() {
        return this.list || []
      },
      extClass() {
        return this.list.length > 0 ? 'hasList' : ''
      }
    },
    methods: {
      // 初始化方法
      init() {},
      handleViewerInfo() {
        this.$tools.navigateTo(
          '/pagesOrder/chooseViewers/index?isSelect=1&ticketNum=' +
            this.ticketNum
        )
      }
    }
  }
</script>
<style lang="scss" scoped>
  .viewer-info {
    border-radius: 18rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
    padding: 33rpx 20rpx 32rpx 20rpx;
    background: #fff;
    margin-bottom: 31rpx;
    &.hasList {
      padding-bottom: 0;
      .header {
        margin-bottom: 20rpx;
      }
    }
    .content {
      .item {
        padding: 29rpx 0 32rpx 0;
        height: 30rpx;
        line-height: 30rpx;
        border-top: 1rpx solid #f3f5f7;
      }
    }
  }
</style>
